颱風假，不用上班，在家閒閒沒事做就來重構一下 ٩(◕‿◕｡)۶

最新版本請參考 D20/asynchrounous-refactor

重構內容簡介

這次更新包含以下內容，可能和以前長的不太一樣，敬請見諒。

• 把資料夾命名從駝峰式命名 XxxXxx改成 烤肉串命名 xxx-xxx-xxx
• 把大部分資料用 S.Class 重建
• 遵循 event -> state -> state 的模式，統一事件處理的方式

  
  / src\app\edit\courses\all\data\states\add-course-form\users-field\index.ts
  
  onst on =
   (event: UpdateInputEvent | DeleteUserEvent | AddUserEvent | Nothing) =>
   (field: UsersField) => {
     return pipe(
       Match.value(event),
       Match.when(Nothing.is, () => Effect.succeed(field)),
       Match.when(AddUserEvent.is, (event) => onAddUser(event)(field)),
       Match.when(DeleteUserEvent.is, (event) => onDeleteUser(event)(field)),
       Match.when(UpdateInputEvent.is, (event) => onUpdateInput(event)(field)),
       Match.exhaustive
     )
   }
  ``
  

• 確定資料夾分配方式

  app/api/.../  # Next.js endpoints 會放這邊，
  app/.../xxx/  # Next.js 資料夾路由
  /page.tsx   # 頁面入口
  /components/
  	/component-a/
  		/index.tsx
  		/component-a1.tsx
  		/component-a2/
  	/componnent-b.tsx
  /features/  # 跨多個 data 的、不好分類的工作流程
  /data/   # @effect/schema Class 以及和資料相關的工作流程
  /atoms/  # atoms 
  service
  /api  # client component 透過 XHR 往後端打的服務先放這邊
  ``
  
  

如何做異步工作流程的測試 ?

測試有分成好幾種，單元測試、元件測試、點對點測試...等。 前面我們已經有介紹過單元測試與元件測試，無論是使用利用 vitest 的 stub，或是 cypress 的 intercept ，有各種方式可以模擬像是 Rest API 這樣的異步工作場景，可是

如果每多一種測試就要多開一份測試資料，久而久之測試資料分散就容易形成管理問題。

因此接下來會跟大家介紹一個超棒的工具 --- MSW

有了它，不論是在瀏覽器環境還是在伺服器端的 Node.js 環境，我們都可以重複使用同一份測試資料來做各種測試。